<template>
  <div class="dataScreen-container">
    <div class="dataScreen-content" ref="dataScreenRef">
      <!-- 头部 -->
      <div
        class="head flex justify-between items-start pt-[10px] box-border px-[45px]"
      >
        <div class="left flex justify-start">
          <div class="bg" @click="changerules('/')">挂图首页</div>
          <div class="bg ml-5">查询统计</div>
          <div class="bg ml-5" @click="changerules('/jstzk')">建设投资</div>
          <div class="bg ml-5" @click="changerules('/gongdiku')">供地库</div>
        </div>
        <div class="right flex justify-end">
          <div class="bg-select mr-5" @click="changerules('/lixiangku')">
            立项库
          </div>
          <div class="bg mr-5">投资进度</div>
          <div class="bg">开工竣工</div>
        </div>
      </div>
      <!-- 截止当前月份累计完成计划投资(万元) -->
      <div class="toptitle">截止当前月份累计完成计划投资(万元)</div>
      <div class="timeandtq">
        <el-date-picker
          v-model="selectedYear"
          type="year"
          :clearable="false"
          :editable="false"
        />
      </div>
      <!-- 主体部分 -->
      <div class="body">
        <div class="left">
          <!-- 头部进度条 -->
          <div class="bodyhead">
            <div class="center-box-top">
              <div class="item">
                <div class="item-left">
                  <el-progress
                    type="circle"
                    :percentage="80"
                    class="item-left"
                    :width="72"
                    :height="72"
                    color="#03C3C3"
                  >
                    <template #default="{ percentage }">
                      <span class="percentage-value">{{ percentage }}%</span>
                      <span class="percentage-label">占比</span>
                    </template>
                  </el-progress>
                </div>
                <div class="item-right">
                  <div class="text-[#4DE4FF]">123</div>
                  <div class="text-[#fff]">省重点项目数(个)</div>
                </div>
              </div>
              <div class="item">
                <div class="item-left">
                  <el-progress
                    type="circle"
                    :percentage="80"
                    class="item-left"
                    :width="72"
                    :height="72"
                    color="#03C3C3"
                  >
                    <template #default="{ percentage }">
                      <span class="percentage-value">{{ percentage }}%</span>
                      <span class="percentage-label">占比</span>
                    </template>
                  </el-progress>
                </div>
                <div class="item-right">
                  <div class="text-[#4DE4FF]">123</div>
                  <div class="text-[#fff]">市重点项目数(个)</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 左侧图型 -->
          <div class="leftbody">
            <div class="top-leftbody">
              <titleimg title="项目性质分析"></titleimg>
              <div id="echart1"></div>
            </div>
            <div class="top-leftbody bodyflex">
              <titleimg title="项目类别分析"></titleimg>
              <div class="relative h-[100%] w-[100%]">
                <div id="echart2" v-if="showicon"></div>
                <div class="absolute top-[50%] left-[50%] echart2boxNum">
                  <div class="">
                    <div class="text-center text-[#19ecff] text-xl">12345</div>
                    <div class="text-[#fff] text-sm">在谈(个)</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 中间部分 -->
        <div class="center">
          <div class="centertop">¥123,456,789</div>
          <div class="centernum">
            <div class="center-head">
              <span class="centerleft">项目总数</span>
              <span class="centernum">01870</span>
              <span class="centerright">个</span>
            </div>
          </div>
          <div class="centerbottom">
            <div class="centerxx">
              <div
                class="centerxxitem"
                :class="changeButton == 1 ? 'select' : 'unselect'"
                @click="changeButton = 1"
              >
                全部(项目总数)
              </div>
              <div
                class="centerxxitem"
                :class="changeButton == 2 ? 'select' : 'unselect'"
                @click="changeButton = 2"
              >
                已批阅(项目总数)
              </div>
              <div
                class="centerxxitem"
                :class="changeButton == 3 ? 'select' : 'unselect'"
                @click="changeButton = 3"
              >
                未批阅(项目总数)
              </div>
            </div>
            <lixinagku :bottomdata="bottomdata"></lixinagku>
          </div>
        </div>
        <div class="right">
          <!-- 头部进度条 -->
          <div class="bodyhead">
            <div class="center-box-top">
              <div class="item">
                <div class="item-left">
                  <el-progress
                    type="circle"
                    :percentage="80"
                    class="item-left"
                    :width="72"
                    :height="72"
                    color="#03C3C3"
                  >
                    <template #default="{ percentage }">
                      <span class="percentage-value">{{ percentage }}%</span>
                      <span class="percentage-label">占比</span>
                    </template>
                  </el-progress>
                </div>
                <div class="item-right">
                  <div class="text-[#4DE4FF]">123</div>
                  <div class="text-[#fff]">总投资(万元)</div>
                </div>
              </div>
              <div class="item">
                <div class="item-left">
                  <el-progress
                    type="circle"
                    :percentage="80"
                    class="item-left"
                    :width="72"
                    :height="72"
                    color="#03C3C3"
                  >
                    <template #default="{ percentage }">
                      <span class="percentage-value">{{ percentage }}%</span>
                      <span class="percentage-label">占比</span>
                    </template>
                  </el-progress>
                </div>
                <div class="item-right">
                  <div class="text-[#4DE4FF]">123</div>
                  <div class="text-[#fff]">年计划投资(万元)</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 右侧图型 -->
          <div class="rightbox">
            <titleimg title="项目立项分析"></titleimg>
            <div id="righticon"></div>
          </div>
        </div>
      </div>
      <div class="footer"></div>

      <!-- 底部图片 -->
    </div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import titleimg from "@/components/vue/titleimg.vue";
import lixinagku from "@/components/lxk-component/lxk-center-table.vue";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElProgress, ElDatePicker } from "element-plus";

const router = useRouter();
const changerules = (url) => {
  router.push(url);
};
let changeButton = ref<number>(1);
const bottomdata = ref([
  {
    zth: "载体号",
    xmm: "项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名",
    jbnr: "基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容",
    hyfl: "行业分类",
    gjys: "关键要素",
    xmlx: "项目类型",
  },
  {
    zth: "载体号",
    xmm: "项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名",
    jbnr: "基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容",
    hyfl: "行业分类",
    gjys: "关键要素",
    xmlx: "项目类型",
  },
  {
    zth: "载体号",
    xmm: "项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名",
    jbnr: "基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容",
    hyfl: "行业分类",
    gjys: "关键要素",
    xmlx: "项目类型",
  },
  {
    zth: "载体号",
    xmm: "项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名",
    jbnr: "基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容",
    hyfl: "行业分类",
    gjys: "关键要素",
    xmlx: "项目类型",
  },
  {
    zth: "载体号",
    xmm: "项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名",
    jbnr: "基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容",
    hyfl: "行业分类",
    gjys: "关键要素",
    xmlx: "项目类型",
  },
  {
    zth: "载体号",
    xmm: "项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名项目名",
    jbnr: "基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容基本内容",
    hyfl: "行业分类",
    gjys: "关键要素",
    xmlx: "项目类型",
  },
]);
const dataScreenRef = ref<HTMLElement | null>(null);
let selectedYear = ref(new Date().getFullYear().toString());
const showicon = ref(false);
onMounted(() => {
  if (dataScreenRef.value) {
    setTimeout(() => {
      dataScreenRef.value.style.transition = `all 0.5s ease`;
    }, 100);
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1920px`;
    dataScreenRef.value.style.height = `1080px`;
  }
  window.addEventListener("resize", resize);
});


const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};


const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
onMounted(() => {
  showicon.value = true;
  setTimeout(() => {
    echarts1();
    echarts2();
    echarts3();
  }, 50);
});
//echart组件1
const echarts1 = () => {
  var chartDom = document.getElementById("echart1");
  var myChart = echarts.init(chartDom);
  const option = {
    color: "#fff",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    toolbox: {
      feature: {},
    },
    legend: {
      data: ["总投资", "年度计划投资", "项目总数"],
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: [
      {
        type: "category",
        data: ["续建", "拟开工", "项目总数"],
        axisPointer: {
          type: "shadow",
        },
        axisLabel: {
          rotate: 0, // 设置标签倾斜角度，单位为度
          textStyle: {
            color: "#fff", //坐标的字体颜色
          },
        },
        axisLine: {
          lineStyle: {
            //改变xy轴线条的颜色
            color: "#FFF",
            width: 1, //这里是为了突出显示加上的
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位(万)",
        min: 0,
        max: 10,
        interval: 2,
        axisLabel: {
          rotate: 0, // 设置标签倾斜角度，单位为度
          textStyle: {
            color: "#fff", //坐标的字体颜色
          },
        },
        axisLine: {
          lineStyle: {
            //改变xy轴线条的颜色
            color: "#FFF",
            width: 1, //这里是为了突出显示加上的
          },
        },
      },
      {
        type: "value",
        name: "",
        min: 0,
        max: 10,
        interval: 2,
        hide: true,
        axisLabel: {
          rotate: 0, // 设置标签倾斜角度，单位为度
          textStyle: {
            color: "#fff", //坐标的字体颜色
          },
        },
        axisLine: {
          lineStyle: {
            //改变xy轴线条的颜色
            color: "#FFF",
            width: 1, //这里是为了突出显示加上的
          },
        },
      },
    ],
    // grid: {
    //   x: 40,
    //   y: 40,
    //   x2: 40,
    //   y2: 40,
    // },
    series: [
      {
        name: "总投资",
        type: "bar",
        data: [2.0, 4.9, 7.0],
        barWidth: 20,

        itemStyle: {
          barBorderRadius: [0, 0, 0, 0], //柱体圆角
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#4BDCF7",
            },
            {
              offset: 1,
              color: "#0C2047",
            },
          ]),
        },
      },
      {
        name: "年度计划投资",
        type: "bar",
        data: [2.6, 5.9, 9.0],
        barWidth: 20,

        itemStyle: {
          barBorderRadius: [0, 0, 0, 0], //柱体圆角
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#3599F8",
            },
            {
              offset: 1,
              color: "#0C2047",
            },
          ]),
        },
      },
      {
        name: "项目总数",
        type: "line",
        yAxisIndex: 1,
        data: [2.0, 2.2, 3.3],
        itemStyle: {
          normal: {
            color: "#F1D34E", //改变折线点的颜色
            lineStyle: {
              color: "#F1D34E", //改变折线颜色
            },
          },
        },
      },
    ],
  };

  option && myChart.setOption(option);
};
//echart组件2
const echarts2 = () => {
  var chartDom = document.getElementById("echart2");
  var myChart = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: "item",
    },
    grid: {
      left: "3%",
      right: "8%",
      bottom: "3%",
      containLabel: true,
    },
    series: [
      {
        name: "项目类别分析",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          color: "#fff",
          normal: {
            formatter: "{b}" + "\n\r" + "({d}%)",
            show: true,
            position: "left",
          },
        },

        data: [
          { value: 1048, name: "民生保障类", label: { color: "#fff" } },
          { value: 735, name: "园区发展类", label: { color: "#fff" } },
          { value: 580, name: "基础设施类", label: { color: "#fff" } },
          { value: 484, name: "城市更新类", label: { color: "#fff" } },
          { value: 300, name: "产业招商类", label: { color: "#fff" } },
        ],
      },
    ],
  };

  option && myChart.setOption(option);
};

//echart组件3
const echarts3 = () => {
  var chartDom = document.getElementById("righticon");
  var myChart = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
      formatter: function (params) {
        let res = "";
        params.forEach((v, i) => {
          res += `${
            i == 0 ? v.name : ""
          }<div style="display:flex;align-items:center">
                    <span
                      style="display:inline-block;
                        margin-right:5px;
                        border-radius:10px;
                        width:10px;
                        height:10px;
                        background-color:${v.color}"
                    ></span>
                    <span>${v.seriesName}: ${Math.abs(v.value)}</span>
                  </div>`;
        });
        return res;
      },
    },
    legend: {
      data: ["已批复项目", "未批复项目总数"],
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      left: "3%",
      right: "8%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "value",

        splitLine: {
          show: false,
        },
        axisLabel: {
          rotate: 0, // 设置标签倾斜角度，单位为度
          textStyle: {
            color: "#fff", //坐标的字体颜色
          },
          formatter: function (value) {
            if (value < 0) {
              return -value;
            } else {
              return value;
            }
          },
        },
        axisLine: {
          lineStyle: {
            //改变xy轴线条的颜色
            color: "#FFF",
            width: 1, //这里是为了突出显示加上的
          },
        },
      },
    ],
    yAxis: [
      {
        show: true, //纵坐标显示

        type: "category",
        position: "left", //纵向坐标显示位置 可选为：left | right
        axisTick: { show: false },
        splitLine: {
          show: false, //网格线不显示
        },
        axisLabel: {
          rotate: 0, // 设置标签倾斜角度，单位为度
          textStyle: {
            color: "#fff", //坐标的字体颜色
          },
        },
        axisLine: {
          lineStyle: {
            //改变xy轴线条的颜色
            color: "#FFF",
            width: 1, //这里是为了突出显示加上的
          },
        },
        data: [
          "制锦式街道",
          "纬北路街道",
          "官扎营街道",
          "堤口路街道",
          "南村街道",
          "药山街道",
          "泺口街道",
          "北坦街道",
          "天桥东街街道",
          "宝华街道",
          "无影山街道",
          "北村街道",
          "北园街道",
          "桑梓店街道",
          "大桥街道",
        ],
      },
    ],
    color: ["#4DE4FE", "#369EFE"],
    series: [
      {
        name: "已批复项目",
        type: "bar",
        stack: "总量",
        barWidth: 18,

        label: {
          normal: {
            show: false,
          },
        },
        data: [
          320, 302, 341, 374, 390, 450, 420, 320, 302, 341, 374, 390, 450, 420,
          324,
        ],
      },
      {
        name: "未批复项目总数",
        type: "bar",
        stack: "总量",
        barWidth: 18,

        label: {
          normal: {
            show: false,
            formatter: function (value) {
              if (value.data < 0) {
                return -value.data;
              }
            },
          },
        },
        data: [
          -120, -132, -101, -134, -190, -230, -210, -120, -132, -101, -134,
          -190, -230, -210, -123,
        ],
      },
    ],
  };

  option && myChart.setOption(option);
};
</script>
<style lang="scss" scoped>
.dataScreen-container {
  width: 100%;
  // height: 100%;

  .dataScreen-content {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    transform-origin: left top;
    .head {
      background-image: url("@/assets/images/headimg.png");
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: 100% 100%;
      height: 75px;
      width: 100%;
      min-height: 75px;
      .bg-select {
        color: #00ffff;
        width: 132px;
        height: 48px;
        background-image: url("@/assets/images/indexheadselect.png");
        background-position: 50% 50%;
        background-size: 100% 100%;
        line-height: 48px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
        transform: translateY(-10px);
      }
      .bg {
        color: #00ffff;
        width: 132px;
        height: 48px;
        background-image: url("@/assets/images//indexunselect.png");
        background-position: 50% 50%;
        background-size: 100% 100%;
        line-height: 48px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
        transform: translateY(-10px);
      }
    }
    .toptitle {
      text-align: center;
      color: #19ecff;
      font-size: 30.6px;
      margin-top: 20px;
      height: 40px;
    }
  }
}
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 12.96px;
  color: #66ffff;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 7.68px;
  color: #fff;
}
.body {
  width: 100%;
  // height: 100%;
  height: calc(1080px - 75px - 40px - 20px - 40px - 20px - 45px);
  padding: 20px 20px 0px 20px;
  box-sizing: border-box;
  display: flex;
  gap: 20px;
  .center-box-top {
    display: flex;
    justify-content: space-around;

    .item {
      display: flex;
      justify-content: center;

      .item-left {
        width: 72px;
        height: 72px;
        background-image: url("@/assets/images/jdbg.png");
        background-position: 50% 50% !important;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .item-right {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        margin-left: 10px;
      }
    }
  }
  .left {
    width: 22%;
    display: flex;
    flex-direction: column;

    .leftbody {
      width: 100%;
      height: calc(100% - 75px - 20px);
      background-image: url("@/assets/images/lxkleft.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: 50% 50%;
      margin-top: 20px;
      position: relative;
      padding: 40px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 20px;
      .bodyflex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .top-leftbody {
        width: 100%;
        height: 50%;

        #echart1 {
          height: 100%;
        }
        #echart2 {
          height: 100%;
        }
        .echart2boxNum {
          transform: translate(-50%, -50%);
          // border: 1px solid red;
        }
        .echart2box {
          height: 100%;
        }
      }
    }
  }
  .right {
    width: 22%;
    .rightbox {
      width: 100%;
      height: calc(100% - 75px - 20px);
      background-image: url("@/assets/images/lxkright.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: 50% 50%;
      margin-top: 20px;
      padding: 40px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      #righticon {
        height: 100%;
        width: 100%;
        flex: 1;
      }
    }
  }
  .center {
    // border: 1px solid #19ecff;
    width: 56%;
    position: relative;
    .centertop {
      // border: 1px solid red;
      height: 142.49px;
      width: 100%;
      background-image: url("@/assets/images/Group 401389@2x.png");
      background-repeat: no-repeat;
      background-size: 855.36px 100%;
      background-position: 50% 50%;
      font-size: 57.6px;
      color: #00ffff;
      text-align: center;
      line-height: 122.49px;
    }
    .centerbottom {
      background-image: url("@/assets/images/lxkbg.png");
      background-position: 50% 50%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 20px;
      box-sizing: border-box;
    }
    .centernum {
      height: 66.56px;
      position: relative;
      .center-head {
        background-image: url("@/assets/images/Group 427319137.png");
        background-position: 50% 50% !important;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        height: 66.56px;
        width: 100%;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        color: #4de4ff;
        text-align: center;
        .centerleft {
          font-size: 24px;
          position: absolute;
          top: 50%;
          left: 30%;
          transform: translateX(-50%) translateY(-50%);
        }
        .centernum {
          font-size: 48px;
          font-weight: 600;
          letter-spacing: 35.5px;
          position: absolute;
          top: 50%;
          left: 58.2%;
          transform: translateX(-50%) translateY(-50%);
        }
        .centerright {
          font-size: 48px;
          font-weight: 600;
          position: absolute;
          top: 50%;
          right: 23.5%;
          transform: translateX(50%) translateY(-50%);
        }
      }
    }
    .centerxx {
      height: 40px;
      width: 100%;
      display: flex;
      gap: 20px;
      margin: 10px 0;

      .centerxxitem {
        width: 180px;
        height: 40px;

        background-size: 100% 100%;
        background-repeat: no-repeat;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
      }
      .select {
        background-image: url("@/assets/images/changbuttonselect.png");
      }
      .unselect {
        background-image: url("@/assets/images/chengButton.png");
      }
    }
  }
}
.footer {
  height: 45px;
  min-height: 75px;
  // border: 1px solid #fff;
  margin-bottom: 0px;
  width: 100%;
  background-image: url("@/assets/images/lxkbottom.png");
  background-position: 50% 50%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.border {
  border: 1px solid red;
}
.timeandtq {
  position: absolute;
  top: 85px;
  left: 0;
}
:deep(.el-input__wrapper) {
  background-color: #04072f;
  border: 1px solid #04072f !important;
  box-shadow: none !important;
  .el-input__prefix {
    color: #fff;
  }
  .el-input__inner {
    color: #fff;
  }
}
</style>
